page{
	background-color: #fff;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-font-feature-settings: "liga","kern";-webkit-appearance: none;
}
.color-primary{
	color: $u-primary !important;
}
.color-success{
	color: $u-success !important;
}
.color-warning{
	color: $u-warning !important;
}
.color-danger{
	color: $u-error !important;
}
/*文字对齐方式*/
.align-left{
  text-align: left !important;
}
.align-right{
  text-align: right !important;
}
.align-center{
  text-align: center !important;
}
.underline{
  text-decoration: underline;
}
.font-bold{
  font-weight: bold;
}
u-form-item{
	position: relative;
}
.u-form-devider{
	min-height: 24upx;
	background-color: #f7f7f7;
	line-height: 3;
	padding: 0 32upx;
	font-size: 24upx;
	color: #aaa;
}
.u-input-unit{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translate(0,-50%);
	padding: 0 10px;
	color: #999;
	font-size: 24upx;
}

.white-body,.white-bg{
  background-color: #fff !important;
}
/* 文本属性：字号、颜色、粗细、正斜 */
/* 字号 */
.f9 { font-size: 18upx !important; }
.f10 { font-size: 20upx !important; }
.f11 { font-size: 22upx !important; }
.f12 { font-size: 24upx !important; }
.f13 { font-size: 26upx !important; }
.f14 { font-size: 28upx !important; }
.f15 { font-size: 30upx !important; }
.f16 { font-size: 32upx !important; }
.f18 { font-size: 34upx !important; }
.f20 { font-size: 40upx !important; }
.f24 { font-size: 48upx !important; }
.f26 { font-size: 52upx !important; }
/* 外边距样式，作用于元素的上下外边距，上下各具有 n, m, w 三个级别 */
.m0 { margin: 0 !important; }
.m5 { margin: 10upx !important; }
.m10 { margin: 20upx !important; }
.m15 { margin: 30upx !important; }
.m20 { margin: 40upx !important; }
.m25 { margin: 50upx !important; }
.m30 { margin: 60upx !important; }
.m40 { margin: 80upx !important; }

.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 10upx !important; }
.mt10 { margin-top: 20upx !important; }
.mt15 { margin-top: 30upx !important; }
.mt20 { margin-top: 40upx !important; }
.mt25 { margin-top: 50upx !important; }
.mt30 { margin-top: 60upx !important; }
.mt40 { margin-top: 80upx !important; }

.mb0 { margin-bottom: 0px !important; }
.mb5 { margin-bottom: 10upx !important; }
.mb10 { margin-bottom: 20upx !important; }
.mb15 { margin-bottom: 30upx !important; }
.mb20 { margin-bottom: 40upx !important; }
.mb25 { margin-bottom: 50upx !important; }
.mb30 { margin-bottom: 60upx !important; }
.mb40 { margin-bottom: 80upx !important; }

.mr0 { margin-right: 0px !important; }
.mr5 { margin-right: 10upx !important; }
.mr10 { margin-right: 20upx !important; }
.mr15 { margin-right: 30upx !important; }
.mr20 { margin-right: 40upx !important; }
.mr25 { margin-right: 50upx !important; }
.mr30 { margin-right: 60upx !important; }
.mr40 { margin-right: 80upx !important; }

.ml0 { margin-left: 0px !important; }
.ml5 { margin-left: 10upx !important; }
.ml10 { margin-left: 20upx !important; }
.ml15 { margin-left: 30upx !important; }
.ml20 { margin-left: 40upx !important; }
.ml25 { margin-left: 50upx !important; }
.ml30 { margin-left: 60upx !important; }
.ml40 { margin-left: 80upx !important; }

.mtb0 { margin-top: 0 !important; margin-bottom: 0 !important;}
.mtb5 { margin-top: 10upx !important; margin-bottom: 10upx !important; }
.mtb10 { margin-top: 20upx !important; margin-bottom: 20upx !important;}
.mtb15 { margin-top: 30upx !important; margin-bottom: 30upx !important; }
.mtb20 { margin-top: 40upx !important; margin-bottom: 40upx !important;}
.mtb25 { margin-top: 50upx !important; margin-bottom: 50upx !important; }
.mtb30 { margin-top: 60upx !important; margin-bottom: 60upx !important; }
.mtb40 { margin-top: 80upx !important; margin-bottom: 80upx !important; }

.mlr0 { margin-left: 0 !important; margin-bottom: 0 !important;}
.mlr5 { margin-left: 10upx !important; margin-bottom: 10upx !important; }
.mlr10 { margin-left: 20upx !important; margin-bottom: 20upx !important;}
.mlr15 { margin-left: 30upx !important; margin-bottom: 30upx !important; }
.mlr20 { margin-left: 40upx !important; margin-bottom: 40upx !important;}
.mlr25 { margin-left: 50upx !important; margin-bottom: 50upx !important; }
.mlr30 { margin-left: 60upx !important; margin-bottom: 60upx !important; }
.mlr40 { margin-left: 80upx !important; margin-bottom: 80upx !important; }


/* 内边距样式，作用于元素的上下内边距，上下各具有 n, m, w 三个级别 */
.p0 { padding: 0px !important; }
.p5 { padding: 10upx !important; }
.p10 { padding: 20upx !important; }
.p15 { padding: 30upx !important; }
.p20 { padding: 40upx !important; }
.p25 { padding: 50upx !important; }
.p30 { padding: 60upx !important; }
.p40 { padding: 80upx !important; }

.pt0 { padding-top: 0px !important; }
.pt5 { padding-top: 10upx !important; }
.pt10 { padding-top: 20upx !important; }
.pt15 { padding-top: 30upx !important; }
.pt20 { padding-top: 40upx !important; }
.pt25 { padding-top: 50upx !important; }
.pt30 { padding-top: 60upx !important; }
.pt40 { padding-top: 80upx !important; }

.pl0 { padding-left: 0px !important; }
.pl5 { padding-left: 10upx !important; }
.pl10 { padding-left: 20upx !important; }
.pl15 { padding-left: 30upx !important; }
.pl20 { padding-left: 40upx !important; }
.pl25 { padding-left: 50upx !important; }
.pl30 { padding-left: 60upx !important; }
.pl40 { padding-left: 80upx !important; }

.pr0 { padding-right: 0px !important; }
.pr5 { padding-right: 10upx !important; }
.pr10 { padding-right: 20upx !important; }
.pr15 { padding-right: 30upx !important; }
.pr20 { padding-right: 40upx !important; }
.pr25 { padding-right: 50upx !important; }
.pr30 { padding-right: 60upx !important; }
.pr40 { padding-right: 80upx !important; }

.pb0 { padding-bottom: 0px !important; }
.pb5 { padding-bottom: 10upx !important; }
.pb10 { padding-bottom: 20upx !important; }
.pb15 { padding-bottom: 30upx !important; }
.pb20 { padding-bottom: 40upx !important; }
.pb25 { padding-bottom: 50upx !important; }
.pb30 { padding-bottom: 60upx !important; }
.pb40 { padding-bottom: 80upx !important; }


.ptb0 { padding-top: 0 !important; margin-bottom: 0 !important;}
.ptb5 { padding-top: 10upx !important; margin-bottom: 10upx !important; }
.ptb10 { padding-top: 20upx !important; margin-bottom: 20upx !important;}
.ptb15 { padding-top: 30upx !important; margin-bottom: 30upx !important; }
.ptb20 { padding-top: 40upx !important; margin-bottom: 40upx !important;}
.ptb25 { padding-top: 50upx !important; margin-bottom: 50upx !important; }
.ptb30 { padding-top: 60upx !important; margin-bottom: 60upx !important; }
.ptb40 { padding-top: 80upx !important; margin-bottom: 80upx !important; }


.plr0 { padding-top: 0 !important; margin-bottom: 0 !important;}
.plr5 { padding-top: 10upx !important; margin-bottom: 10upx !important; }
.plr10 { padding-top: 20upx !important; margin-bottom: 20upx !important;}
.plr15 { padding-top: 30upx !important; margin-bottom: 30upx !important; }
.plr20 { padding-top: 40upx !important; margin-bottom: 40upx !important;}
.plr25 { padding-top: 50upx !important; margin-bottom: 50upx !important; }
.plr30 { padding-top: 60upx !important; margin-bottom: 60upx !important; }
.plr40 { padding-top: 80upx !important; margin-bottom: 80upx !important; }

.page-search-bar{
	padding: 20upx;
	background-color: #fff;
	display: flex;
	&-filter{
		width: 70upx;
		height: 70upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.m-iconfont{
			font-size: 36upx;
			color: #666;
		}
	}
	&-main{
		flex: 1;
	}
}
.filter-panel-btn{
	display: flex;
	padding: 20upx;
	justify-content: center;
	u-button{
		flex: 1;
		margin: 20upx;
	}
}
.m-fixed-footer{
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100upx;
	justify-content: center;
	align-items: center;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;
	z-index: 10;
	background-color: #fff;
	box-shadow: 0 -10upx 15upx rgba(0,0,0,0.05);
	u-button{
		display: block;
		width: 100%;
		flex: 1;
		height: 100%;
		.u-size-default{
			height: 100%;
			border-radius: 0;
			border: none;
		}
		.u-btn--default{
			border: none;
		}
	}
	&~.page-body{
		padding-bottom: 180upx;
	}
	&-aggregate{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #666;
	}
}
.u-form-label-x{
	height: 70upx;
	padding: 20upx 0;
	display: flex;
	justify-content: space-between;
}
.popup-picker-box{
	height: calc(100vh - 240upx);
	overflow: auto;
	padding: 20upx;
	z-index: 300;
	background-color: #FFFFFF;
}
.popup-picker-btn{
	display: flex;
	padding:20upx 10upx;
	justify-content: space-around;
	u-button{
		border-radius: 0;
		width: 45%;
	}
}
.u-form-user{
	&-list{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 20upx 0;
	}
	&-item{
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	&-delete{
		position: absolute;
		width: 36upx;
		height: 36upx;
		border-radius: 30upx;
		z-index: 2;
		left: 50%;
		margin-left: 20upx;
		top: 0upx;
		background-color: rgba(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 24upx;
		line-height: 1;
		&:active{
			opacity: 0.5;
		}
	}
	&-avatar{
		width: 100upx;
		height: 100upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f7f7f7;
		font-size: 40upx;
		color: #666;
	}
	&-name{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		text-align:center;
		margin-top: 20upx;
		color: #999;
	}
}
.date-picker-value-box{
	display: flex;
	height: 88upx;
	align-items: center;
	font-size: 28upx;
	.m-iconfont{
		margin-left: 10upx;
		font-size: 28upx;
	}
}
.type-legend{
	&-list{
		display: flex;
		flex-wrap: wrap;
		margin-top: 10upx;
		&.col2{
			.type-legend-item{
				width: 50%;
			}
		}
		&.col4{
			.type-legend-item{
				width: 25%;
			}
		}
	}
	&-item{
		display: flex;
		align-items: center;
		color: #666;
		padding: 4upx 0;
		&-shape{
			width: 20upx;
			height: 20upx;
			background-color: $u-primary;
			margin-right: 10upx;
		}
	}
}
.list-loading-box{
	min-height: 120upx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.u-link-btn{
	color: $u-primary;
}
.flex-box{
	display: flex;
}
.flex1{
	flex: 1;
}
.just-content-center{
	justify-content: center;
	display: flex;
}
.just-content-between{
	justify-content: space-between;
	display: flex;
}
.blank-box{
	min-height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.person-item{
	display: flex;
	align-items: center;
	font-size: 30upx;
	border-bottom: solid 1px #f5f5f5;
	&-image{
		margin-right: 30upx;
		width: 30px;
		height: 30px;
		border-radius: 15px;
		background-color: #f7f7f7;
		
	}
	&-main{
		padding: 30upx 0;
		flex: 1;
	}
}
.gray-body{
	background-color: #F5F5F5;
	min-height: 100vh;
}
.check-list{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	&-item{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 56upx;
		padding: 0 14upx;
		font-size: 28upx;
		color: #555;
		background-color: #eee;
		border-radius: 6upx;
		margin: 8upx 16upx 8upx 0;
		&.checked{
			background-color: $u-primary;
			color: #fff;
		}
	}
}
.u-form-container{
	display: flex;
	&-main{
		flex: 1;
	}
	&-asider{
		border-bottom: solid 1upx #eee;
	}
}
.sticky-box{
	position: sticky;
	top: -1px;
	z-index: 10;
}

.uview-large-button{
  height: 110upx;
  font-size: 32upx;
}

input:-internal-autofill-selected{
  background-color: rgba(0,0,0,0);
  color: inherit;
}
.sex-male{
  color: #2CC5F3;
}
.sex-female{
  color: #FD98B5;
  
}

.yl-main-title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  &__title{
    font-size: 18px;
    color: #333333;
    font-weight: bold;
  }
  &__btn{
    font-size: 14px;
    color: #666666;
    text-align: right;
    transition: all 0.3s;
    &:active{
      opacity: 0.7;
    }
  }
}

.su-filter-bar{
  display: flex;
  justify-content: space-between;
}

.yl-primary-header{
  &-img{
    border-radius: 100upx;
    display: flex;
    justify-content: center;
    align-items: center;
    image{
      background-color: #fff;
      display: block;
      width: 200upx;
      height: 200upx;
      border-radius: 100upx;
    }
  }
  &-title{
    font-size: 40upx;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    margin-top: 24upx;
    margin-bottom: 16upx;
    min-height: 56upx;
  }
  &-rate{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.dark-label{
  &-list{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16upx 0;
  }
  &-item{
    padding:6upx 12upx;
    color: rgba(255,255,255,0.8);
    font-size: 24upx;
    background: rgba(0,0,0,0.14);
    border-radius: 4px;
    margin: 8upx;
  }
}

.su-images{
  &-list{
    display: flex;
  }
  &-item{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &__image{
      background-color: #f9f9f9;
      border-radius: 10upx;
      overflow: hidden;
    }
    &__label{
      font-size: 24upx;
      color: #666;
      padding-top: 10upx;
    }
    image{
      width: 160upx;
      height: 120upx;
      display: block;
    }
  }
}

.su-text-list{
  background-color: #fff;
  padding:24upx 30upx;
  border-bottom: solid 1upx #eee;
  &:active{
    opacity: 0.7;
  }
  &-title{
    font-size: 32upx;
    font-weight: bold;
    color: #303133;
  }
  &-prop{
    font-size: 28upx;
    padding: 10upx 0;
    color: #888;
    line-height: 1.4;
  }
  &-time{
    font-size: 24upx;
    color: #999;
  }
}

.su-cell{
  display: flex;
  align-items: center;
  font-size: 28upx;
  height: 100upx;
  padding: 0 30upx;
  border-bottom: solid 1upx #f7f7f7;
  &:active{
    background-color: #f7f7f7;
  }
  &-group{
    background-color: #fff;
    border-radius: 16upx;
    margin-bottom: 24upx;
  }
  &-label{
    flex: 1;
    color: #000;
  }
  &-icon{
    font-size: 40upx;
    width: 60upx;
    color: $u-primary;
  }
  &-description{
    font-size: 24upx;
    color: #999;
    flex: 1;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &-right{
    max-width: 60%;
    display: flex;
  }
  .icon-arrow-right-line{
    color: #999;
    font-size: 24upx;
    margin-left: 8upx;
  }
}
.su-placeholder{
  color: #bbb;
}
.my-income-list{
    background-color: #fff;
    display: flex;
    padding: 20upx 30upx;
    margin-bottom: 20upx;
    &__icon{
      margin-right: 20upx;
      padding: 10upx 0;
      .iconfont{
        font-size: 44upx;
      }
    }
    &__main{
      flex: 1;
    }
    &__prop{
      display: flex;
      justify-content: space-between;
      font-size: 24upx;
      color: #999;
      padding: 6upx 0;
    }
    &__title{
      font-size: 32upx;
      color: #303133;
      display: flex;
      margin-bottom: 10upx;
      &-start{
        flex: 1;
      }
    }
    &__time{
      font-size: 26upx;
      color: #999;
      margin-top: 10upx;
    }
    &__amount{
      font-size: 32upx;
      font-weight: bold;
      font-family: Arial;
    }
  }
  
  .u-button--primary{
    border: none !important;
  }
  .su-form-item-group{
    background-color: #fff;
    margin-bottom: 20upx;
    padding: 0 30upx;
  }
  .flex-between{
    display: flex;
    align-items: center;
    justify-content: space-between;
    .icon-arrow-right-line{
      font-size: 24upx;
      color: #aaa;
    }
  }
  
  .su-fit-image{
    width: 100%;
  }